<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 以借助 script 标签直接通过 CDN 来使用 Vue： -->
    <script src="./JS/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <app></app>
    </div>

    <script>
      Vue.config.productionTip = false;

      // 1.创建student组件
      const student = {
        template: `<div>
          <h2>学生姓名:{{studentName}}</h2>
      <h2>学生年龄:{{age}}</h2>
      </div>`,
        data() {
          return {
            studentName: "张三",
            age: 18,
          };
        },
      };
      //1.创建school组件
      const school = {
        template: ` <div><h2>学校名称:{{schoolName}}</h2>
      <h2>学校地址:{{address}}</h2>
      <student></student></div>`,

        data() {
          return {
            schoolName: "尚硅谷",
            address: "北京",
          };
        },
        components: {
          student,
        },
      };
      //创建hello组件
      const hello = Vue.extend({
        template: `<div> <h2>你好{{name}}</h2></div>`,
        data() {
          return {
            name: "tom",
          };
        },
      });
      //创建app组件
      const app = {
        template: `<div>
      <school></school>
      <hello></hello>
      <hr />
    </div>`,
        components: {
          school,
          hello,
        },
      };

      new Vue({
        el: "#app",
        // 2.注册组件（局部组件）
        components: {
          app,
        },
      });
    </script>
  </body>
</html>
